<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #s {
            width: 50px;
            height: 50px;
            text-align: center;
            position: absolute;
            background-color: red;
            top: 300px;
            right: 50px;
        }
    </style>
</head>

<body>
    <!-- <a href="top"></a> -->

    <div id="off" style="width: 1000px;height: 2000px;margin-top: 100px;"></div>
    <div id="s">
        <a style="text-decoration: none;">返回顶部</a>
    </div>



</body>

<script>
    var s = document.getElementById('s');
    var off = document.getElementById('off');
    // console.log(off.offsetHeight, off.offsetTop);
    var gao = (s.offsetTop - 120);

    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= 120) {
            s.style.top = gao + 'px';
            s.style.position = 'fixed';


        } else {
            s.style.position = 'absolute';
            s.style.top = 300 + 'px';

        }


    })
    s.addEventListener('click', function() {
        // 里面的x和y 不跟单位的 直接写数字即可
        // window.scroll(0, 0);
        // 因为是窗口滚动 所以对象是window
        animate(window, 0);
    });
    // 动画函数
    function animate(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            // obj.style.left = window.pageYOffset + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    }
</script>

</html>